<template>
	<up-navbar @rightClick="openMenu" placeholder>
		<template #center>
			<view class="top-title">
				<up-text
					:lines="1"
					:text="deviceInfo?.name || deviceInfo?.device_sn"
					bold
					color="#333"
					size="16"></up-text>
				<view class="title-bottom">
					<up-text
						:text="
							deviceStore.deviceStatus?.conn_status == 1
								? getStatus(deviceStore.deviceStatus?.status)
								: t('index.status')
						"
						align="right"
						style="margin-right: 10px"
						:color="
							deviceStore.deviceStatus?.conn_status === 1
								? getStatusColor(
										deviceStore.deviceStatus?.status
								  )
								: '#999'
						"
						size="12"></up-text>
					<up-avatar
						shape="square"
						size="18"
						v-if="deviceStore.deviceStatus?.battery"
						:src="
							`/static/image/index/battery` +
							getBatteryPic(deviceStore.deviceStatus?.battery) +
							`.svg`
						"></up-avatar>
					<up-text
						:text="deviceStore.deviceStatus?.battery + '%'"
						style="margin-right: 10px"
						size="12"></up-text>
					<up-avatar
						shape="square"
						size="18"
						v-if="defaultDevice?.model_id === 'YZYH'"
						src="/static/image/device/water.png"></up-avatar>
					<up-text
						:text="deviceStore.deviceStatus?.water_percentage + '%'"
						style="margin-right: 10px"
						size="12"></up-text>
					<up-avatar
						shape="square"
						style="transform: rotate(90deg)"
						@click="goRepair"
						v-if="deviceStore.deviceStatus?.repair_status === 'on'"
						size="19"
						src="/static/image/device/repair.png"></up-avatar>
				</view>
			</view>
		</template>
		<template #right>
			<up-avatar
				shape="square"
				size="24"
				src="/static/image/common/menu.png"></up-avatar>
		</template>
	</up-navbar>
	<up-popup
		:show="showMenu"
		mode="right"
		@close="closeMenu"
		bgColor="transparent"
		closeOnClickOverlay
		class="pup-box">
		<view class="pup-all">
			<view class="pup-content">
				<view class="pup-span">
					<up-text
						:text="deviceInfo.name || deviceInfo.device_sn"
						bold
						color="#000"
						size="20"></up-text>
					<up-text
						style="margin: 3px 0 5px"
						:text="`${t('device.sn')}： ${deviceInfo.device_sn}`"
						color="#333"
						size="13"></up-text>
				</view>
				<view class="pup-span">
					<up-cell-group :border="false">
						<up-cell
							v-for="(item, index) in cellList"
							:key="index"
							isLink
							:url="item.url"
							rightIconStyle="color:#000000e6">
							<template #title>
								<u-title>
									<template #prefix>
										<up-avatar
											shape="square"
											size="18"
											class="avatar"
											:src="item.icon"></up-avatar>
									</template>
									<up-text
										:text="item.name"
										size="14"
										style="line-height: 24px"></up-text>
								</u-title>
							</template>
						</up-cell>
					</up-cell-group>
				</view>
				<view class="pup-span pup-bottom">
					<up-cell-group :border="false">
						<up-cell
							isLink
							url="/pages/manage/helpInfo"
							rightIconStyle="color:#000000e6">
							<template #title>
								<u-title>
									<template #prefix>
										<up-avatar
											shape="square"
											size="18"
											class="avatar"
											src="/static/image/device/menu_help.png"></up-avatar>
									</template>
									<up-text
										:text="t('management.help')"
										size="14"
										style="line-height: 24px"></up-text>
								</u-title>
							</template>
						</up-cell>
					</up-cell-group>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup lang="ts">
import {
	getBatteryPic,
	getBatteryColor,
	getStatusColor,
	getStatus,
} from "@/utils/deviceUtils";
import { useI18n } from "vue-i18n";
import { ref, watch, onMounted, computed } from "vue";
const { locale, t } = useI18n();
const showMenu = ref(false);
import { useDeviceStore } from "@/stores/device";
const defaultDevice = useUniversalStorage("DefaultDevice", {});
const deviceStore = useDeviceStore();
const props = defineProps<{
	deviceInfo: Device;
}>();
watch(
	() => [deviceStore.deviceStatus],
	() => {},
	{ immediate: true, deep: true }
);
const openMenu = () => {
	showMenu.value = true;
	emit("openPath", false);
};
const emit = defineEmits(["openPath"]);
const cellList = computed<link[]>(() => [
	{
		name: t("management.mapManagement"),
		url: `/pages/manage/mapManagement?device_sn=${props.deviceInfo.device_sn}`,
		icon: "/static/image/device/menu_map.png",
	},
	{
		name: t("management.cleaningPlan"),
		url: `/pages/manage/cleaningTask/index?device_sn=${props.deviceInfo.device_sn}`,
		icon: "/static/image/device/menu_plans.png",
	},
	{
		name: t("management.workRecord"),
		url: `/pages/manage/workRecord?device_sn=${props.deviceInfo.device_sn}`,
		icon: "/static/image/device/menu_record.png",
	},
	{
		name: t("message.title.0"),
		url: `/pages/manage/pushMsg?device_sn=${props.deviceInfo.device_sn}`,
		icon: "/static/image/device/menu_push.png",
	},
	{
		name: t("message.title.1"),
		url: `/pages/manage/errorMessage?device_sn=${props.deviceInfo.device_sn}&&type=realTimeError`,
		icon: "/static/image/device/menu_event.png",
	},
	{
		name: t("management.vehicleSetup"),
		url: `/pages/manage/vehicleSettings/index?device_sn=${props.deviceInfo.device_sn}`,
		icon: "/static/image/device/menu_set.png",
	},
	// {
	// 	name: t("management.scheduledTask"),
	// 	url: "/pages/manage/mapManagement",
	// 	icon: "/static/image/device/menu_task.png",
	// },
	// {
	// 	name: t("timedTask.title2"),
	// 	url: "/pages/manage/mapManagement",
	// 	icon: "/static/image/device/menu_task.png",
	// },
	// {
	// 	name: t("management.bluetoothControl"),
	// 	url: "/pages/manage/mapManagement",
	// 	icon: "/static/image/device/menu_bluetooth.png",
	// },
	// {
	// 	name: t("device.videoSurveillance"),
	// 	url: "/pages/manage/mapManagement",
	// 	icon: "/static/image/device/monitoring.png",
	// },
]);
const closeMenu = () => {
	showMenu.value = false;
	emit("openPath", true);
};
const topHeight = ref("0");
onMounted(() => {
	// 获取状态栏高度
	// #ifdef APP-PLUS
	const statusBarHeight = ref(0);
	const systemInfo = uni.getSystemInfoSync();
	statusBarHeight.value = systemInfo.statusBarHeight || 0;
	topHeight.value = statusBarHeight.value + "px";
	// #endif
});
const goRepair = () => {
	uni.navigateTo({
		url: `/pages/manage/errorMessage?device_sn=${props.deviceInfo.device_sn}&&type=repair`,
	});
};
</script>

<style lang="scss" scoped>
:deep(.uicon-arrow-left) {
	font-size: 16px !important;
	font-weight: 900 !important;
}
.top-title {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	:deep(.u-text) {
		width: fit-content !important;
		flex: 0 1 auto !important;
	}
}
.title-bottom {
	display: flex;
	justify-content: center;
	:deep(.u-text__value) {
		white-space: nowrap;
	}
}

.pup-box {
	:deep(.u-slide-up-enter-active) {
		/* #ifdef H5 */
		bottom: 0 !important;
		/* #endif */
	}
	:deep(.u-fade-enter-active) {
		/* #ifdef H5 */
		bottom: 0 !important;
		/* #endif */
	}
	.pup-all {
		background-color: #fff;
		height: 100vh;
		// #ifdef APP-PLUS
		padding-top: v-bind(topHeight);
		/* #endif */
	}
	.pup-content {
		// #ifdef APP-PLUS
		height: calc(100% - v-bind(topHeight));
		width: 100%;
		/* #endif */
		background-color: #f7f7f7;
		/* #ifdef H5 */
		height: 100vh;
		overflow: auto;
		/* #endif */
		box-sizing: border-box;
		padding: 20rpx;
	}
	:deep(.u-popup__content) {
		width: 80vw !important;
		overflow-y: auto !important;
	}
	.pup-span {
		background-color: #fff;
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx;
		border-radius: 10px;
		margin-bottom: 20rpx;
		:deep(.u-cell__body) {
			padding: 13px 15px 13px 10px !important;
		}
		:deep(.u-line) {
			border-bottom: 1px solid #f5f6f7 !important;
			margin-left: 20rpx !important;
		}
		.avatar {
			margin-right: 10rpx;
		}
	}
	.pup-bottom {
		margin-bottom: 40rpx;
	}
}
:deep(.u-cell-group__wrapper) {
	:last-child {
		.u-line {
			border-bottom: 0 !important;
		}
	}
}
</style>
